let path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const { CleanWebpackPlugin } =require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports={
    mode:'development',
    entry:{
        app: path.resolve(__dirname,'../../src/preact/project/charm/index.js'), // 入口文件,
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'../../dist/')
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/i,
                exclude: /(node_modules|bower_components)/,
                use:{
                    loader:'babel-loader?cacheDirectory',// 缓存每次的解析结果 加载更快
                    options:{
                        "presets": [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ],
                        "plugins": [
                          ["transform-react-jsx", { "pragma":"h" }],
                          [
                              "@babel/plugin-proposal-class-properties"
                          ]
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ],
            },
            {
                test:/\.(jpg|png)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        publicPath:'./',
                        limit:4*1024,
                    }
                }
            }
        ]
    },
    devtool: 'source-map',
    devServer: {
        compress: true,//是否启用gzip压缩
        port: 9000//提供访问的端口
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'../../src/preact/project/charm/index.html'),//查找模板文件
        }),
        new CleanWebpackPlugin()   //清空dist目录下的文件
    ],
    optimization: {
        runtimeChunk: 'single',
        minimize: true,
        minimizer: [new TerserPlugin({
            extractComments: "all",
        })],
        splitChunks: {
          chunks: 'all',
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              chunks: 'all',
            },
          },
        },
      },
    resolve: {
        alias: {
          "@preact": path.resolve(__dirname, '../../src/preact/'),
          "@comps": path.resolve(__dirname, '../../src/preact/components'),
          "@static": path.resolve(__dirname, '../../static/'),
          "@static:css": path.resolve(__dirname, '../../static/css'),
          "@charm:data": path.resolve(__dirname, '../../project/charm'),
          "@charm:ui": path.resolve(__dirname, '../../src/preact/project/charm'),
          "@libs": path.resolve(__dirname, '../../libs'),
          "@store": path.resolve(__dirname, '../../store')
        }
    }
}